<!--
  *@Description : In user setting edit
  *@author 萧红
  *@date 2020-03-23 20:46
  *@LastEditTime 2020-03-23 20:46
  *@LastEdititors
-->
<template>
    <div id="my">
      <div :style="{height: $inerHeight + 45 + 'px'}">
        <cube-scroll ref="scroll" :data="[1,2,3,4]">
          <div class="bg" :style="{background:`url(${userData.bgImgUrl}) 0% 0% / cover no-repeat`}">
            <div class="avatar">
              <img :src="userData.avatarUrl" alt="" width="100%" height="100%">
            </div>
          </div>
          <div class="username" @click="toNewPage({path:'/userDetail',query:{userId:userId}})">
            {{userData.name}}
          </div>
          <div class="data">
            <div @click="toNewPage('/fansList')">
              <div class="number">{{userData.fansNumber}}</div>
              <div class="content">粉丝</div>
            </div>
            <div @click="toNewPage('/guanZhuList')">
              <div class="number">{{userData.guanZhuNumber}}</div>
              <div class="content">关注</div>
            </div>
            <div>
              <div class="number">{{userData.cosGoldCount}}</div>
              <div class="content">cos币</div>
            </div>
          </div>
          <div class="memo">
            <div class="memo-item" @click="toNewPage('/sign')">
              <img src="../../../static/icon-nav-my/icon_sign.png" alt="签到" class="item-icon">
              <div class="item-text">
                <div class="item-label">签到</div>
                <div class="msg main-color">未签到</div>
                <div class="btn-icon">
                  <i class="cubeic-arrow"></i>
                </div>
              </div>
            </div>
            <div class="memo-item">
              <img src="../../../static/icon-nav-my/icon_news.png" alt="签到" class="item-icon">
              <div class="item-text">
                <div class="item-label">我的消息</div>
                <div class="msg"><span class="main-color">14 </span> 条未读</div>
                <div class="btn-icon">
                  <i class="cubeic-arrow"></i>
                </div>
              </div>
            </div>
            <div class="memo-item">
              <img src="../../../static/icon-nav-my/icon_chat.png" alt="签到" class="item-icon">
              <div class="item-text">
                <div class="item-label">我的聊天</div>
                <div class="msg"><span class="main-color">1 </span> 条未读</div>
                <div class="btn-icon">
                  <i class="cubeic-arrow"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="memo">
            <div class="memo-item">
              <img src="../../../static/icon-nav-my/icon_sign.png" alt="签到" class="item-icon">
              <div class="item-text">
                <div class="item-label">我的关注</div>
                <div class="msg"> <span class="main-color">2</span> 条新动态</div>
                <div class="btn-icon">
                  <i class="cubeic-arrow"></i>
                </div>
              </div>
            </div>
            <div class="memo-item">
              <img src="../../../static/icon-nav-my/icon_collection.png" alt="我的收藏" class="item-icon">
              <div class="item-text">
                <div class="item-label">我的收藏</div>
                <div class="msg"></div>
                <div class="btn-icon">
                  <i class="cubeic-arrow"></i>
                </div>
              </div>
            </div>
            <div class="memo-item">
              <img src="../../../static/icon-nav-my/icon_ranking.png" alt="签到" class="item-icon">
              <div class="item-text">
                <div class="item-label">排行榜</div>
                <div class="msg"></div>
                <div class="btn-icon">
                  <i class="cubeic-arrow"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="memo">
            <div class="memo-item">
              <img src="../../../static/icon-nav-my/icon_hanbi.png" alt="cos币中心" class="item-icon">
              <div class="item-text">
                <div class="item-label">cos币中心</div>
                <div class="msg"></div>
                <div class="btn-icon">
                  <i class="cubeic-arrow"></i>
                </div>
              </div>
            </div>
            <div class="memo-item" @click="toNewPage('/setting')">
              <img src="../../../static/icon-nav-my/icon_setting.png" alt="我的设置" class="item-icon">
              <div class="item-text">
                <div class="item-label">设置</div>
                <div class="msg"></div>
                <div class="btn-icon">
                  <i class="cubeic-arrow"></i>
                </div>
              </div>
            </div>
          </div>
        </cube-scroll>
      </div>
      <Bottom :select-index="3"></Bottom>
    </div>
</template>

<script>
import Bottom from '../../components/Bottom'
export default {
  name: 'my',
  components: {
    Bottom
  },
  data () {
    return {
      defaultAvata: '',
      defaultBg: '',
      userName: '',
      userId: '',
      userData: {}
    }
  },
  created: function () {
    let info = JSON.parse(localStorage.getItem('info'))
    this.defaultAvata = info.avataUrl
    this.bgImgUrl = info.bgImgUrl
    this.userName = info.userName
    this.userId = info.id
    if (!this.defaultAvata) {
      this.defaultAvata = '../../../static/default_image.png'
    }
    if (!this.bgImgUrl) {
      this.bgImgUrl = '../../../static/default_avatar.png'
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      this.userId = localStorage.getItem('userId')
      this.apis.getUserDetail({userId: this.userId}).then(res => {
        if (res.code === 200) {
          this.userData = res.data
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../../node_modules/stylus-px2rem"
#my
{
  .bg
  {
    width 100%
    height 50px
    position: relative
    background-size: contain;
    .avatar
    {
      width: 25px
      height: 25px
      position: absolute
      transform translateY(50%)
      left:2px
      bottom: 0;
      img
      {
        width 100%
        height 100%
        border-radius 50%
        border: 1px solid #f0f0f0;
      }
    }
  }
  .username
  {
    width: 100%
    height: 20px
    line-height: 20px
    text-align left
    padding-left 32px
    font-size:8px
  }
  .data
  {
    display flex
    justify-content space-around
    border-bottom 3px solid #f0f0f0
    border-top 1px solid #f0f0f0
    & > div
    {
      width: 32%
      height 20px
      display flex
      flex-flow column nowrap
      justify-content space-around
      border-right 1px solid #f0f0f0
    }
    & > div:last-child
    {
      border none
    }
  }
  .memo
  {
    display flex
    flex-flow column nowrap
    justify-content flex-start
    border-bottom 3px solid #f0f0f0
    .memo-item
    {
      display flex
      flex-flow row nowrap
      justify-content flex-start
      padding 2px 5px
      font-size 7px
      align-items center
      .item-icon
      {
        width: 15px
        height: 15px
        padding-right 5px
      }
      .item-text
      {
        width 90%
        display flex
        flex-flow row nowrap
        justify-content space-around
        line-height 21px
        border-bottom 1px solid #f0f0f0
        .item-label
        {
          width 50%
          text-align left
        }
        .msg
        {
          width 40%
          text-align right
          color:#ccc
        }
        .btn-icon
        {
          width: 10%
          position relative
          i
          {
            position absolute
            top: 0
            right 0
          }
        }
      }
    }
  }
}
</style>
